<template>
  <!-- 内容检测页面 -->
  <div>
    monitor
    <el-table :data="tableData">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="数量" prop="count"></el-table-column>
      <!-- <el-table-column label="商品描述" prop="desc"></el-table-column> -->
      <el-table-column label="商品图片" prop="img"></el-table-column>

      <!-- <el-table-column prop="img" label="商品图片" width="100" height="100">
        <template slot-scope="scope">
          <div style="width: 100%; height: 100%">
            <img :src="scope.row.img" style="width: 100%; height: 100%" alt="" />
          </div>
        </template>
      </el-table-column> -->

      <el-table-column align="right">
        <!-- <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template> -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData(page = 1) {
      const result = await axios.get('/api/list', { params: { page, size: 5 } })
      console.log('result:', result.data.data.list)
      this.tableData = result.data.data.list
      this.total = result.data.data.total
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      // console.log(index, row)
      this.tableData.splice(
        this.tableData.findIndex((v) => v.id === row.id),
        1
      )
    },
    handleCurrentChange(page) {
      console.log(page, 'page')
      this.getData(page)
    },
  },
}
</script>

<style></style>
